import {
	useState,useRef
} from 'react';
import './layoutBox.less';

import {
	Input,Checkbox,Divider,
	Radio,Space,Select,Button,
	Popconfirm,DatePicker
} from 'antd';
import {
	DeleteOutlined,
	CopyOutlined,
	UploadOutlined,
	CloudUploadOutlined
} from '@ant-design/icons';

import SubForm from '@/components/SubForm';
import SubFormDrag from '@/components/SubFormDrag';

const { RangePicker } = DatePicker;
const { TextArea } = Input;

type PropsType = {
	onLayoutBoxDrop:Function,
	delComp:Function,
	copyComp:Function,
	onCompClick:Function,
	onCompDrop:Function,
	onCompDragStart:Function,
	layoutData:any[],
	curCompIndex:number,
	onSubFormDataChange:Function
}

function LayoutBox(props:PropsType) {

	const [dragType,setDragType] = useState<null | string>(null);

	const compRef = useRef<any>([]);

	function onLayoutBoxDragOver(e:any){
		e.preventDefault();
		// e.target.style.borderColor = '#13c2c2'
	}

	window.onmouseup =function(e){
		// console.log(e);
		// compRef.current.forEach((item:any)=>{
			// if(item){
			// 	item.style.border = 'none';
			// }
		// })
	}

	function onLayoutBoxDrop(e:any){
		// console.log(e);
		// console.log(dragType);
		try{
			if(dragType !== 'comp' && e.target.className.startsWith('layoutBox')){
				props.onLayoutBoxDrop();
			} else {
				setDragType(null);
			}

			// console.log(compRef);
			compRef.current.forEach((item:HTMLElement)=>{
				// console.log(item)
				if(item){
					item.style.border = 'none';
				}
			})
		}catch(err){
			console.log(err)
		}

	}

	function delComp(e:any,id:string) {
		e.preventDefault()
		props.delComp(id);
	}
	function copyComp(e:any,item:any,index:number) {
		e.preventDefault()
		props.copyComp(item,index);
	}
	function onCompClick(index:number) {
		props.onCompClick(index);
	}

	function onCompDragStart(e:any,index:number){
		// console.log(e);
		setDragType('comp');
		props.onCompDragStart(index);

	}
	function onCompDragOver(e:any,item:any,index:number){
		e.preventDefault();
		// console.log(e.target.className);
		if(!e.target.className) return;
		if(typeof e.target.className !== 'string') return;

		if(e.target.className.startsWith('compItem')){
			e.target.style.border = '1px dashed #13c2c2';
			// console.log(index)
			compRef.current.forEach((item2:any,index2:number)=>{
				if(index2 !== index){
					if(item2){
						item2.style.border = 'none';
					}
				}
			})
		}

	}

	function onCompDrop(e:any,item:any,index:number){
		props.onCompDrop(item,index,dragType)
		setDragType(null);
	}

	function radioRender(item:any){
		const {props:itemProps} = item;
		return (
			<Radio.Group value={item.value}>
				<Space direction={itemProps.vertical ? "vertical" :'horizontal'}>
					{itemProps.options.map((r:any)=>(
						<Radio key={r.value} value={r.value}>
							{r.label}
						</Radio>
					))}
				</Space>
			</Radio.Group>
		)
	}
	function selectRender(item:any){
		const {props:itemProps} = item;
		return (
			<Select
				style={{width:"100%"}}
				options={itemProps.options}
				disabled={true}
				placeholder={itemProps.tip}
			/>
		)
	}

	function InputRender(item:any){

		const {props:itemProps} = item;

		const props = {
			placeholder:itemProps.tip,
			disabled:true,
		}
		return !itemProps.textarea ? (
			<Input {...props} />
		):(
			<TextArea {...props} />
		)
	}
	function datePickerRender(item:any){
		const {props:itemProps} = item;
		return(
			<DatePicker
				placeholder={itemProps.tip}
				allowClear={itemProps.allowClear}
				picker={itemProps.picker}
				showTime={itemProps.showTime}
				showToday={itemProps.showToday}
				defaultValue={itemProps.defaultValue}
				value={item.value}
				disabled={true}
			/>
		)
	}
	function dateRangeRender(item:any){
		const {props:itemProps} = item;
		return(
			<RangePicker
				placeholder={itemProps.tip}
				allowClear={itemProps.allowClear}
				picker={itemProps.picker}
				showTime={itemProps.showTime}
				defaultValue={itemProps.defaultValue}
				value={item.value}
				disabled={true}
			/>
		)
	}

	function checkboxRender(item:any) {
		const {props:itemProps} = item;
		return (
			<Checkbox.Group
				disabled={true}
				value={item.value}
			>
				{itemProps.options.map((v:any)=>(
					<div key={v.value} style={{display:itemProps.direction === 'vertical'?'block':'inline-block'}}>
						<Checkbox  value={v.value} > {v.label} </Checkbox>
					</div>
				))}
			</Checkbox.Group>
		)
	}

	function uploadRender(item:any,index:number) {

		return (
			<div className="upload">
				<CloudUploadOutlined className="icon" /><span>选择或拖拽上传文件，单个200MB以内</span>
			</div>
		)
	}
	function staffTreeRender(item:any,index:number) {
		return (
			<div className="selectBtn">
				选择成员
			</div>
		)
	}
	function orgTreeRender(item:any,index:number) {
		return (
			<div className="selectBtn">
				组织架构选择
			</div>
		)
	}
	const subFormRender=(item:any,index:number)=> {
		const onChange = (data:any) =>{
			props.onSubFormDataChange(data,index);
		}
		// console.log('subForm Children',item.children);
		return (
			// <SubForm subFormObj={item} />
			<SubFormDrag
				listData={item.children}
				onChange={onChange}
			/>
		)
	}

	function splitLineRender(item:any,index:number){
		const {styles} = item;
		return (
			<div className="splitLine">
				{item.showTit && <h4 className="tit" style={{color:styles.titColor}}>{item.tit}</h4> }
				<Divider
					className="divider"
					dashed={styles.dashed}
					style={{borderColor:styles.lineColor}}
				/>
				<p className="splitDesc">{item.splitDesc}</p>
			</div>
		)
	}

	function placeBlockRender(item:any,index:number){
		return (
			<div className="placeBlock" />
		)
	}

	return (
		<div
			className="layoutBox"
			onDragOver={onLayoutBoxDragOver}
			onDrop={onLayoutBoxDrop}
		>
			{
				props.layoutData.map((item,index) =>(
					<div
						className={
							`compItem width-${item.span} ${props.curCompIndex === index ? 'act' : ''} ${item.inline ? 'compItem-inline' : ''}`
						}
						ref={f=>{compRef.current[index]=f}}
						key={item.id}
						onClick={()=>onCompClick(index)}
						draggable={true}
						onDragStart={(e)=>onCompDragStart(e,index)}
						onDragOver={(e)=>onCompDragOver(e,item,index)}
						onDrop={(e)=>onCompDrop(e,item,index)}
					>
						{item.showTitle ? (
							<h4 className="tit"> {item.check.required && <span className="req">*</span>} {item.title}</h4>
						): null}

						{
							!item.inline && (
								item.describe && <p className="desc">{item.describe}</p>
							)
						}
            <div className="item">
						{
							item.name === 'radio' ? radioRender(item)
							:item.name === 'input' ? InputRender(item)
							:item.name === 'select' ? selectRender(item)
							:item.name === 'datePicker' ? datePickerRender(item)
							:item.name === 'dateRange' ? dateRangeRender(item)
							:item.name === 'checkbox' ? checkboxRender(item)
							:item.name === 'upload' ? uploadRender(item,index)
							:item.name === 'staffTree' ? staffTreeRender(item,index)
							:item.name === 'orgTree' ? orgTreeRender(item,index)
							:item.name === 'subForm' ? subFormRender(item,index)
							:item.name === 'splitLine' ? splitLineRender(item,index)
							:item.name === 'placeBlock' ? placeBlockRender(item,index)
							: null
						}
            </div>
						{
							item.inline && (
								item.describe && <p className="desc">{item.describe}</p>
							)
						}

						{
							props.curCompIndex === index ? (
								<div className="editbar">
									<Popconfirm
										title="确认删除该组件吗？"
										onConfirm={(e)=>delComp(e,item.id)}
										okText="确认"
										cancelText="取消"
									>
										<DeleteOutlined className="del" />
									</Popconfirm>
									<CopyOutlined className="copy" onClick={(e)=>{copyComp(e,item,index)}} />
								</div>
							): null
						}
					</div>
				))
			}


		</div>
	)
}

export default LayoutBox;
